/* eslint-disable react/prop-types */
import { Button, Flex, Form, Input, message, Modal, Radio } from "antd"
import { useCallback, useEffect, useState } from "react"

import { queryBatchQueryMemberLimitRed, queryTeamlateList, queryTeamlateUpdateBatch } from "@/api/member"
import { ITeamlateListRes, ITeamlateUpdateBatchParams } from "@/api/member/types"
import { IMemberParams } from "@/api/risk/types"
import { Toast } from "@/components/messages"
import { useLocale } from "@/locales"

import { CustomTextArea } from "../../basicInfo/components/CustomTextArea"
import { dataLimitedRedRes } from ".."

interface IEditModalProps {
	data: IMemberParams
	dataLimitedRed: dataLimitedRedRes[]
	refreshData: () => Promise<void>
}
// queryTeamlateUpdateBatch
export const EditModal: React.FC<IEditModalProps> = ({ data, refreshData }) => {
	const [form] = Form.useForm()
	const [dataCredit, setDataCredit] = useState<ITeamlateUpdateBatchParams[]>([])
	const [isModalOpen, setIsModalOpen] = useState(false)
	const [options, setOptions] = useState<ITeamlateListRes[]>([])
	const { formatMessage } = useLocale()

	const submit = async (values: any) => {
		const reqData = {
			...dataCredit[0],
			applyRemark: values?.applyRemark || "",
			templateId: values.templateId,
			merchantId: data.merchantId || "",
			memberIds: [data.id?.toString() || ""]
		}
		const [err] = await queryTeamlateUpdateBatch({ ...reqData })
		if (err) return Toast.error(err.msg)
		await refreshData()
		setIsModalOpen(false)
		form.resetFields()
		message.success(formatMessage({ id: "common.action_success" }))
	}

	const handleGetMemberLimitRed = useCallback(async () => {
		const [errMemberLimit, memberLimitRedRes] = await queryBatchQueryMemberLimitRed({
			memberIds: [data.id?.toString() || ""],
			merchantId: data.merchantId
		})
		if (!errMemberLimit) setDataCredit(memberLimitRedRes)

		form.setFieldValue("templateName", memberLimitRedRes[0]?.templateName || "")
		form.setFieldValue("templateId", memberLimitRedRes[0]?.templateId || "")
		const [errTeamlate, teamlateListRes] = await queryTeamlateList({
			merchantId: data.merchantId,
			templateId: memberLimitRedRes[0]?.templateId + "" || ""
		})
		if (!errTeamlate) setOptions(teamlateListRes)
	}, [data])

	const templateOptions = options.map((item: ITeamlateListRes) => {
		return {
			value: item.templateId,
			label: item.templateName
		}
	})

	useEffect(() => {
		console.log(isModalOpen)
		if (isModalOpen) handleGetMemberLimitRed()
	}, [isModalOpen])
	return (
		<>
			<Button
				onClick={() => {
					form.resetFields()
					setIsModalOpen(true)
				}}
				type="primary"
			>
				{formatMessage({ id: "member.limited_red.edit" })}
			</Button>
			<Modal
				footer={null}
				centered
				title={formatMessage({ id: "member.edit_credit.title" })}
				onCancel={() => setIsModalOpen(false)}
				open={isModalOpen}
			>
				<Form form={form} onFinish={submit}>
					<Form.Item>
						<Form.Item
							name="googleKey"
							label={formatMessage({ id: "member.edit_credit.venue_name" })}
							labelCol={{ style: { width: 120 } }}
						>
							<Input bordered={false} defaultValue={formatMessage({ id: "member.edit_credit.realVenue" })} />
						</Form.Item>
						<Form.Item
							name="googleKey"
							label={formatMessage({ id: "member.edit_credit.player_account" })}
							labelCol={{ style: { width: 120 } }}
						>
							<Input bordered={false} defaultValue={data.userName} />
						</Form.Item>
						<Form.Item
							name="googleKey"
							label={formatMessage({ id: "member.edit_credit.general_gent" })}
							labelCol={{ style: { width: 120 } }}
						>
							<Input bordered={false} defaultValue={data.topProxyName} />
						</Form.Item>
						<Form.Item
							name="templateName"
							label={<p style={{ whiteSpace: "normal" }}>{formatMessage({ id: "member.edit_credit.red_limit_template" })}</p>}
							labelCol={{ style: { width: 120 } }}
						>
							<Input bordered={false} />
						</Form.Item>
						<Form.Item
							name="templateId"
							labelCol={{ style: { width: 120 } }}
							label={<p style={{ whiteSpace: "normal" }}>{formatMessage({ id: "member.edit_credit.option" })}</p>}
						>
							<Radio.Group style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "8px" }}>
								{templateOptions.map(item => {
									return (
										<Radio key={item.label} value={item.value}>
											{item.label}
										</Radio>
									)
								})}
							</Radio.Group>
						</Form.Item>
						<CustomTextArea
							labelCol={{ style: { width: 120 } }}
							width="100%"
							placeholder={formatMessage({ id: "member.edit_credit.placeholder" })}
							name="applyRemark"
							label={formatMessage({ id: "member.edit_credit.remarks" }) + ":"}
							disableRules
						/>

						<Flex justify="center" gap={10} className="marginTop">
							<Button
								htmlType="button"
								onClick={() => {
									form.resetFields()
									setIsModalOpen(false)
								}}
							>
								{formatMessage({ id: "member.table_info.cancel" })}
							</Button>
							<Button type="primary" htmlType="submit">
								{formatMessage({ id: "member.table_info.confirm" })}
							</Button>
						</Flex>
					</Form.Item>
				</Form>
			</Modal>
		</>
	)
}
